<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Dynamic Grid component - UIkit documentation</title>
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.docs.min.css">
        <link rel="stylesheet" href="css/docs.css">
        <link rel="stylesheet" href="../vendor/highlight/highlight.css">
        <script src="../vendor/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
        <script src="../vendor/highlight/highlight.js"></script>
        <script src="js/docs.js"></script>
        <script src="../src/js/components/grid.js"></script>
    </head>

    <body class="tm-background">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="documentation_get-started.html">Get Started</a></li>
                    <li><a href="core.html">Core</a></li>
                    <li class="uk-active"><a href="components.html">Components</a></li>
                    <li><a href="customizer.html">Customizer</a></li>
                    <li><a href="../showcase/index.html">Showcase</a></li>
                    <li><a href="tutorials.html">Tutorials</a></li>
                </ul>

                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-middle">
            <div class="uk-container uk-container-center">

                <div class="uk-grid" data-uk-grid-margin>
                    <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">

                        <ul class="tm-nav uk-nav" data-uk-nav>
                            <li class="uk-nav-header">Layout</li>
                            <li class="uk-active"><a href="grid-js.html">Dynamic Grid</a></li>
                            <li><a href="grid-parallax.html">Parallax Grid</a></li>
                            <li class="uk-nav-header">Navigations</li>
                            <li><a href="dotnav.html">Dotnav</a></li>
                            <li><a href="slidenav.html">Slidenav</a></li>
                            <li><a href="pagination-js.html">Dynamic Pagination</a></li>
                            <li class="uk-nav-header">Common</li>
                            <li><a href="form-advanced.html">Form advanced</a></li>
                            <li><a href="form-file.html">Form file</a></li>
                            <li><a href="form-password.html">Form password</a></li>
                            <li><a href="form-select.html">Form select</a></li>
                            <li><a href="placeholder.html">Placeholder</a></li>
                            <li><a href="progress.html">Progress</a></li>
                            <li class="uk-nav-header">JavaScript</li>
                            <li><a href="lightbox.html">Lightbox</a></li>
                            <li><a href="autocomplete.html">Autocomplete</a></li>
                            <li><a href="datepicker.html">Datepicker</a></li>
                            <li><a href="htmleditor.html">HTML editor</a></li>
                            <li><a href="slider.html">Slider</a></li>
                            <li><a href="slideset.html">Slideset</a></li>
                            <li><a href="slideshow.html">Slideshow</a></li>
                            <li><a href="parallax.html">Parallax</a></li>
                            <li><a href="accordion.html">Accordion</a></li>
                            <li><a href="notify.html">Notify</a></li>
                            <li><a href="search.html">Search</a></li>
                            <li><a href="nestable.html">Nestable</a></li>
                            <li><a href="sortable.html">Sortable</a></li>
                            <li><a href="sticky.html">Sticky</a></li>
                            <li><a href="timepicker.html">Timepicker</a></li>
                            <li><a href="tooltip.html">Tooltip</a></li>
                            <li><a href="upload.html">Upload</a></li>
                        </ul>

                    </div>
                    <div class="tm-main uk-width-medium-3-4">

                        <article class="uk-article">

                            <h1>Dynamic Grid</h1>

                            <p class="uk-article-lead">Create a multi-column, dynamic grid layout whose items can be sorted and filtered.</p>

                            <p>The Dynamic Grid component allows you to create a dynamic and responsive grid layout utilizing the <a href="grid.html">Grid component</a>. Grid items will arrange themselves fluently and seamlessly for a gap-free multi-column layout on all device sizes.</p>

                            <hr class="uk-article-divider">

                            <h2 id="usage"><a href="#usage" class="uk-link-reset">Usage</a></h2>

                            <p>To apply this component, add the <code>data-uk-grid</code> attribute to the container element. Set the width of the grid items by using the <code>uk-width-*</code> or <code>.uk-grid-width-*</code> classes from the <a href="grid.html">Grid component</a>.</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4 tm-grid-colors tm-grid-heights" data-uk-grid>
                                <div><div class="uk-panel">1</div></div>
                                <div><div class="uk-panel">2</div></div>
                                <div><div class="uk-panel">3</div></div>
                                <div><div class="uk-panel">4</div></div>
                                <div><div class="uk-panel">5</div></div>
                                <div><div class="uk-panel">6</div></div>
                                <div><div class="uk-panel">7</div></div>
                                <div><div class="uk-panel">8</div></div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;!-- This is a grid using uk-width-* on each item --&gt;
&lt;div data-uk-grid&gt;
    &lt;div class="uk-width-small-1-2 uk-width-medium-1-4"&gt;...&lt;/div&gt;
    &lt;div class="uk-width-small-1-2 uk-width-medium-1-4"&gt;...&lt;/div&gt;
&lt;/div&gt;

&lt;!-- This is a grid using uk-grid-width-* on the grid itself --&gt;
&lt;div class="uk-grid-width-small-1-2 uk-grid-width-medium-1-4" data-uk-grid&gt;
    &lt;div&gt;...&lt;/div&gt;
    &lt;div&gt;...&lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3 id="grid-gutter"><a href="#grid-gutter" class="uk-link-reset">Grid Gutter</a></h3>

                            <p>Divide grid items with a gutter by adding the <code>{gutter: 20}</code> option to the data attribute. In this case the gutter will be 20px wide.</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4 tm-grid-heights" data-uk-grid="{gutter: 20}">
                                <div><div class="uk-panel-box">1</div></div>
                                <div><div class="uk-panel-box">2</div></div>
                                <div><div class="uk-panel-box">3</div></div>
                                <div><div class="uk-panel-box">4</div></div>
                                <div><div class="uk-panel-box">5</div></div>
                                <div><div class="uk-panel-box">6</div></div>
                                <div><div class="uk-panel-box">7</div></div>
                                <div><div class="uk-panel-box">8</div></div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

                            <pre><code>&lt;div data-uk-grid="{gutter: 20}"&gt;...&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="filtering"><a href="#filtering" class="uk-link-reset">Filtering</a></h2>

                            <p>You can also filter your grid so that only particular items will be displayed. To do so, add the <code>{controls: '#my-id'}</code> option to the data-attribute to target the id for the filter controls. Each control needs to have the <code>data-uk-filter</code> attribute to define the category you want to filter. Then you also need to add the <code>data-uk-filter</code> attribute to each grid item to define what category the item belongs to. Separate multiple categories by comma.</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <ul id="filter" class="uk-subnav uk-subnav-pill">
                                <li class="uk-active" data-uk-filter=""><a href="#">All</a></li>
                                <li data-uk-filter="filter-a"><a href="#">Filter A</a></li>
                                <li data-uk-filter="filter-b"><a href="#">Filter B</a></li>
                            </ul>

                            <div class="uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4 tm-grid-heights" data-uk-grid="{gutter: 20, controls: '#filter'}">
                                <div data-uk-filter="filter-a"><div class="uk-panel-box">A 1</div></div>
                                <div data-uk-filter="filter-b"><div class="uk-panel-box">B 2</div></div>
                                <div data-uk-filter="filter-a"><div class="uk-panel-box">A 3</div></div>
                                <div data-uk-filter="filter-b"><div class="uk-panel-box">B 4</div></div>
                                <div data-uk-filter="filter-b"><div class="uk-panel-box">B 5</div></div>
                                <div data-uk-filter="filter-a"><div class="uk-panel-box">A 6</div></div>
                                <div data-uk-filter="filter-b"><div class="uk-panel-box">B 7</div></div>
                                <div data-uk-filter="filter-a,filter-b"><div class="uk-panel-box">A+B 8</div></div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

                            <p>This example is using a <a href="subnav.html">Subnav</a> to filter the items.</p>

<pre><code>&lt;!-- Filter Controls --&gt;
&lt;ul id="my-id" class="uk-subnav"&gt;
    &lt;li data-uk-filter=""&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li data-uk-filter="filter-a"&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li data-uk-filter="filter-b"&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- Dynamic Grid --&gt;
&lt;div data-uk-grid="{controls: '#my-id'}"&gt;
    &lt;div data-uk-filter="filter-a"&gt;...&lt;/div&gt;
    &lt;div data-uk-filter="filter-b"&gt;...&lt;/div&gt;
    &lt;div data-uk-filter="filter-a,filter-b"&gt;...&lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="sorting"><a href="#sorting" class="uk-link-reset">Sorting</a></h2>

                             <p>To sort grid items ascendingly, add the <code>{controls: '#my-id'}</code> option to the data-attribute to target the id for the sorting controls.</p>

                             <p>Each control needs to have the <code>data-uk-sort</code> attribute with a custom value that targets the category you want to be sorted, for example <code>data-uk-sort="my-category"</code>. You also need to add a data attribute to each grid item, using your target category's name. The value contains the data which should be sorted, for example <code>data-my-category="my-data"</code>.</p>

                             <p>Items are sorted ascendingly by default. To sort the items descendingly just add <code>:desc</code> to the value of the controls' data attribute, for example <code>data-uk-sort="my-category:desc"</code>.</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <ul id="sort1" class="uk-subnav uk-subnav-pill">
                                <li class="uk-active" data-uk-sort="my-category"><a href="#">Ascending</a></li>
                                <li data-uk-sort="my-category:desc"><a href="#">Descending</a></li>
                            </ul>

                            <div class="uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4 tm-grid-heights" data-uk-grid="{gutter: 20, controls: '#sort1'}">
                                <div data-my-category="a"><div class="uk-panel-box">A</div></div>
                                <div data-my-category="b"><div class="uk-panel-box">B</div></div>
                                <div data-my-category="c"><div class="uk-panel-box">C</div></div>
                                <div data-my-category="d"><div class="uk-panel-box">D</div></div>
                                <div data-my-category="e"><div class="uk-panel-box">E</div></div>
                                <div data-my-category="f"><div class="uk-panel-box">F</div></div>
                                <div data-my-category="g"><div class="uk-panel-box">G</div></div>
                                <div data-my-category="h"><div class="uk-panel-box">H</div></div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;ul id="my-id" class="uk-subnav"&gt;
    &lt;li data-uk-sort="my-category"&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li data-uk-sort="my-category:desc"&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div data-uk-grid="{controls: '#my-id'}"&gt;
    &lt;div data-my-category="a"&gt;...&lt;/div&gt;
    &lt;div data-my-category="b"&gt;...&lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3>Multiple categories</h3>

                            <p>To use more than one category to sort grid items, use a different name for each category.</p>

                            <ul id="sort2" class="uk-subnav uk-subnav-pill">
                                <li class="uk-active" data-uk-sort="my-category"><a href="#">Character (Asc)</a></li>
                                <li data-uk-sort="my-category:desc"><a href="#">Character (Desc)</a></li>
                                <li data-uk-sort="my-category2"><a href="#">Number (Asc)</a></li>
                                <li data-uk-sort="my-category2:desc"><a href="#">Number (Desc)</a></li>
                            </ul>

                            <div class="uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4 tm-grid-heights" data-uk-grid="{gutter: 20, controls: '#sort2'}">
                                <div data-my-category="a" data-my-category2="8"><div class="uk-panel-box">A 8</div></div>
                                <div data-my-category="b" data-my-category2="7"><div class="uk-panel-box">B 7</div></div>
                                <div data-my-category="c" data-my-category2="6"><div class="uk-panel-box">C 6</div></div>
                                <div data-my-category="d" data-my-category2="1"><div class="uk-panel-box">D 1</div></div>
                                <div data-my-category="e" data-my-category2="5"><div class="uk-panel-box">E 5</div></div>
                                <div data-my-category="f" data-my-category2="3"><div class="uk-panel-box">F 3</div></div>
                                <div data-my-category="g" data-my-category2="2"><div class="uk-panel-box">G 2</div></div>
                                <div data-my-category="h" data-my-category2="4"><div class="uk-panel-box">H 4</div></div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;ul id="my-id" class="uk-subnav"&gt;
    &lt;li data-uk-sort="my-category"&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li data-uk-sort="my-category:desc"&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li data-uk-sort="my-category2"&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li data-uk-sort="my-category2:desc"&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div data-uk-grid="{controls: '#my-id'}"&gt;
    &lt;div data-my-category="a" data-my-category2="8"&gt;...&lt;/div&gt;
    &lt;div data-my-category="b" data-my-category2="7"&gt;...&lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="javascript-options"><a href="#javascript-options" class="uk-link-reset">JavaScript options</a></h2>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>Option</th>
                                            <th>Possible value</th>
                                            <th>Default</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>colwidth</code></td>
                                            <td>integer</td>
                                            <td>auto</td>
                                            <td>Columns width</td>
                                        </tr>
                                        <tr>
                                            <td><code>animation</code></td>
                                            <td>boolean</td>
                                            <td>true</td>
                                            <td>Animate columns on update</td>
                                        </tr>
                                        <tr>
                                            <td><code>duration</code></td>
                                            <td>integer</td>
                                            <td>200</td>
                                            <td>Animation duration</td>
                                        </tr>
                                        <tr>
                                            <td><code>gutter</code></td>
                                            <td>integer</td>
                                            <td>0</td>
                                            <td>Gutter between columns</td>
                                        </tr>
                                        <tr>
                                            <td><code>controls</code></td>
                                            <td>string</td>
                                            <td>false</td>
                                            <td>Css selector to connect filter / order controls.</td>
                                        </tr>
                                        <tr>
                                            <td><code>filter</code></td>
                                            <td>string</td>
                                            <td>''</td>
                                            <td>Items filter</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">Init element manually</h3>

                            <pre><code>var grid = UIkit.grid(element, { /* options */ });</code></pre>

                            <h3>Events</h3>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Parameter</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>beforeupdate.uk.grid</code></td>
                                            <td>event, children</td>
                                            <td>On before update grid</td>
                                        </tr>
                                        <tr>
                                            <td><code>afterupdate.uk.grid</code></td>
                                            <td>event, children</td>
                                            <td>On after update grid</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <p>Listening for beforeupdate events with jQuery:</p>

<pre><code>$(function() {
    $('[data-uk-grid]').on('beforeupdate.uk.grid', function(e, children) {
        // your event-handling goes here
    });
});</code></pre>

                        </article>

                    </div>
                </div>

            </div>
        </div>

        <div class="tm-footer">
            <div class="uk-container uk-container-center uk-text-center">

                <ul class="uk-subnav uk-subnav-line uk-flex-center">
                    <li><a href="http://github.com/uikit/uikit">GitHub</a></li>
                    <li><a href="http://github.com/uikit/uikit/issues">Issues</a></li>
                    <li><a href="http://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
                    <li><a href="https://twitter.com/getuikit">Twitter</a></li>
                </ul>

                <div class="uk-panel">
                    <p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br>Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
                    <a href="../index.html"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
                </div>

            </div>
        </div>

        <div id="tm-offcanvas" class="uk-offcanvas">

            <div class="uk-offcanvas-bar">

                <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{multiple:true}">
                    <li class="uk-parent"><a href="#">Documentation</a>
                        <ul class="uk-nav-sub">
                            <li><a href="documentation_get-started.html">Get started</a></li>
                            <li><a href="documentation_how-to-customize.html">How to customize</a></li>
                            <li><a href="documentation_layouts.html">Layout examples</a></li>
                            <li><a href="core.html">Core</a></li>
                            <li><a href="components.html">Components</a></li>
                            <li><a href="documentation_project-structure.html">Project structure</a></li>
                            <li><a href="documentation_less-sass.html">Less &amp; Sass files</a></li>
                            <li><a href="documentation_create-a-theme.html">Create a theme</a></li>
                            <li><a href="documentation_create-a-style.html">Create a style</a></li>
                            <li><a href="documentation_customizer-json.html">Customizer.json</a></li>
                            <li><a href="documentation_javascript.html">JavaScript</a></li>
                            <li><a href="documentation_custom-prefix.html">Custom prefix</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Core</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-wrench"></i> Defaults</a>
                        <ul class="uk-nav-sub">
                            <li><a href="base.html">Base</a></li>
                            <li><a href="print.html">Print</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> Layout</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid.html">Grid</a></li>
                            <li><a href="panel.html">Panel</a></li>
                            <li><a href="block.html">Block</a></li>
                            <li><a href="article.html">Article</a></li>
                            <li><a href="comment.html">Comment</a></li>
                            <li><a href="utility.html">Utility</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">Cover</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> Navigations</a>
                        <ul class="uk-nav-sub">
                            <li><a href="nav.html">Nav</a></li>
                            <li><a href="navbar.html">Navbar</a></li>
                            <li><a href="subnav.html">Subnav</a></li>
                            <li><a href="breadcrumb.html">Breadcrumb</a></li>
                            <li><a href="pagination.html">Pagination</a></li>
                            <li><a href="tab.html">Tab</a></li>
                            <li><a href="thumbnav.html">Thumbnav</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-check"></i> Elements</a>
                        <ul class="uk-nav-sub">
                            <li><a href="list.html">List</a></li>
                            <li><a href="description-list.html">Description list</a></li>
                            <li><a href="table.html">Table</a></li>
                            <li><a href="form.html">Form</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> Common</a>
                        <ul class="uk-nav-sub">
                            <li><a href="button.html">Button</a></li>
                            <li><a href="icon.html">Icon</a></li>
                            <li><a href="close.html">Close</a></li>
                            <li><a href="badge.html">Badge</a></li>
                            <li><a href="alert.html">Alert</a></li>
                            <li><a href="thumbnail.html">Thumbnail</a></li>
                            <li><a href="overlay.html">Overlay</a></li>
                            <li><a href="text.html">Text</a></li>
                            <li><a href="column.html">Column</a></li>
                            <li><a href="animation.html">Animation</a></li>
                            <li><a href="contrast.html">Contrast</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dropdown.html">Dropdown</a></li>
                            <li><a href="modal.html">Modal</a></li>
                            <li><a href="offcanvas.html">Off-canvas</a></li>
                            <li><a href="switcher.html">Switcher</a></li>
                            <li><a href="toggle.html">Toggle</a></li>
                            <li><a href="scrollspy.html">Scrollspy</a></li>
                            <li><a href="smooth-scroll.html">Smooth scroll</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Components</li>
                    <li class="uk-parent uk-active"><a href="#"><i class="uk-icon-th-large"></i> Layout</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid-js.html">Dynamic Grid</a></li>
                            <li><a href="grid-parallax.html">Parallax Grid</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> Navigations</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dotnav.html">Dotnav</a></li>
                            <li><a href="slidenav.html">Slidenav</a></li>
                            <li><a href="pagination-js.html">Dynamic Pagination</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> Common</a>
                        <ul class="uk-nav-sub">
                            <li><a href="form-advanced.html">Form advanced</a></li>
                            <li><a href="form-file.html">Form file</a></li>
                            <li><a href="form-password.html">Form password</a></li>
                            <li><a href="form-select.html">Form select</a></li>
                            <li><a href="placeholder.html">Placeholder</a></li>
                            <li><a href="progress.html">Progress</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript</a>
                        <ul class="uk-nav-sub">
                            <li><a href="lightbox.html">Lightbox</a></li>
                            <li><a href="autocomplete.html">Autocomplete</a></li>
                            <li><a href="datepicker.html">Datepicker</a></li>
                            <li><a href="htmleditor.html">HTML editor</a></li>
                            <li><a href="slider.html">Slider</a></li>
                            <li><a href="slideset.html">Slideset</a></li>
                            <li><a href="slideshow.html">Slideshow</a></li>
                            <li><a href="parallax.html">Parallax</a></li>
                            <li><a href="accordion.html">Accordion</a></li>
                            <li><a href="notify.html">Notify</a></li>
                            <li><a href="search.html">Search</a></li>
                            <li><a href="nestable.html">Nestable</a></li>
                            <li><a href="sortable.html">Sortable</a></li>
                            <li><a href="sticky.html">Sticky</a></li>
                            <li><a href="timepicker.html">Timepicker</a></li>
                            <li><a href="tooltip.html">Tooltip</a></li>
                            <li><a href="upload.html">Upload</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="../showcase/index.html">Showcase</a></li>
                    <li><a href="tutorials.html">Tutorials</a></li>
                </ul>

            </div>

        </div>

    </body>
</html>
